---
title: <media-playback-rate-menu>
description: Media Playback Rate Menu
layout: ../../../../layouts/ComponentLayout.astro
source: https://github.com/muxinc/media-chrome/tree/main/src/js/media-playback-rate-menu.js
---

import SandpackContainer from "../../../../components/SandpackContainer.astro";

A menu for playback rates.

> Remember to add the separate menu module for the menu components.

```js
import "media-chrome";
import "media-chrome/menu";
```

### Default usage

<SandpackContainer
  editorHeight={250}
  html={`<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-playback-rate-menu hidden anchor="auto"></media-playback-rate-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-playback-rate-menu-button></media-playback-rate-menu-button>
  </media-control-bar>
</media-controller>`}
/>

### Explicit linking

<SandpackContainer
  editorHeight={250}
  html={`<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-playback-rate-menu hidden id="menu1" anchor="menu-button1"></media-playback-rate-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-playback-rate-menu-button id="menu-button1" invoketarget="menu1"></media-playback-rate-menu-button>
  </media-control-bar>
</media-controller>`}
/>

### Setting rates

<SandpackContainer
  editorHeight={250}
  html={`<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-playback-rate-menu rates="1 2 3" hidden anchor="auto"></media-playback-rate-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-playback-rate-menu-button></media-playback-rate-menu-button>
  </media-control-bar>
</media-controller>`}
/>
